<template>
  <div class="box">
    <aside-box>
      <template #zh> 饼图 </template>
      <template #en> pie chart </template>
      <div class="pie" ref="pieRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import projectBall from "../../assets/images/projectBall.png";
import political from "../../assets/images/political.png";

const chartData = ref([
  {
    name: "话题1",
    value: "34",
  },
  {
    name: "话题2",
    value: "4",
  },
  {
    name: "话题3",
    value: "0",
  },
  {
    name: "话题4",
    value: "1",
  },
  {
    name: "话题5",
    value: "0",
  },
  {
    name: "话题6",
    value: "0",
  },
  {
    name: "话题7",
    value: "1",
  },
  {
    name: "话题8",
    value: "0",
  },
  {
    name: "话题9",
    value: "0",
  },
  {
    name: "话题10",
    value: "0",
  },
  {
    name: "话题11",
    value: "0",
  },
  {
    name: "话题12",
    value: "0",
  },
]);
const totalSum = ref("40");
const colorList = [
  "#FF00A8",
  "#DB00FF",
  "#9E00FF",
  "#0038FF",
  "#0085FF",
  "#00F0FF",
  "#FF3335",
  "#FF6629",
  "#FF930F",
  "#FFBB67",
  "#FFF08F",
  "#19CA97",
];
const option = {
    graphic: {
    // 这个属性可以在饼图内部填充图片,文字等
    elements: [
      {
    type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
    style: {
      image: political, //这里添加图片地址
      width: 220,
      height: 75,
    },
    left: 'center',
    top: "55%", // 配置图片是否居中可选值 middle | 百分比
      },
    ],
  },
  title: {
    //环形图中间添加文字
    text: totalSum.value + "人", //通过不同top值可以设置上下显示
    left: "center",
    top: "25%",
    textStyle: {
      color: "#FFFFFF", //文字的颜色
      fontSize: 18,
      fontFamily: "阿里妈妈数黑体 Bold",
      textAlign: "center",
    },
    subtext: "总人数",
    subtextStyle: {
      color: "#fff",
      fontSize: 12,
      fontFamily: "阿里妈妈数黑体 Bold",
      textAlign: "center",
    },
  },
  tooltip: {
    // trigger: 'item',
  },
  color: colorList, // 自定义color
  legend: [
    {
      itemGap: 20,
      itemHeight: 12,
      icon: "circle",
      orient: "vertical",
      data: chartData.value.slice(0, 6),
      // align: "right",
      x: "left",
      // 自定义更改图例显示
      formatter: (name) => {
        let data = chartData.value;
        let target;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            target = data[i].value;
          }
        }
        return [`{name|${name}} {value|${target}}{unit|人}`];
      },
      textStyle: {
        fontWeight: "normal",
        color: "#fff",
        textBorderColor: "transpartent",
        fontSize: 12,
        fontFamily: "阿里妈妈数黑体 Bold",
        // 添加
        rich: {
          name: {
            fontSize: 12,
            width: 80,
            color: "#B4C0CC",
            fontFamily: "阿里妈妈数黑体 Bold",
          },
          target: {
            align: "center",
          },
        },
      },
    },
    {
      itemGap: 20,
      itemHeight: 12,
      icon: "circle",
      orient: "vertical",
      data: chartData.value.slice(6, 12),
      // align: "left",
      x: "right",
      // 自定义更改图例显示
      formatter: (name) => {
        let data = chartData.value;
        let target;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            target = data[i].value;
          }
        }
        return [`{value|${target}}{unit|人} {name|${name}}`];
      },
      textStyle: {
        fontWeight: "normal",
        color: "#fff",
        textBorderColor: "transpartent",
        fontSize: 12,
        fontFamily: "阿里妈妈数黑体 Bold",
        // 添加
        rich: {
          name: {
            fontSize: 12,
            width: 80,
            color: "#B4C0CC",
            fontFamily: "阿里妈妈数黑体 Bold",
          },
          target: {
            align: "center",
          },
        },
      },
    },
  ],
  series: [
    {
      // name: "Access From",
      type: "pie",
      radius: ["55%", "70%"],
      center: ["50%", "35%"],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10,
      },
      label: {
        show: true,
        position: "center",
        // 图形移动通过formatter和rich属性增加背景图， label设置true
        // formatter: [
        //   "{a|}", // 使用富文本标记设置文字样式和背景图片
        // ].join("\n"),
        formatter: function (params) {
          return "{richText1|}";
        },
        rich: {
          richText1: {
            color: "#333",
            fontSize: 14,
            width: 105, // 设置背景图片宽度
            height: 105, // 设置背景图片高度
            backgroundColor: {
              image: projectBall, // 设置背景图片
            },
          },
        },
      },
      emphasis: {
        label: {
          show: true, // 不触发文字在中间区域展示
          fontSize: 14,
          fontFamily: "阿里妈妈数黑体 Bold",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: chartData.value,
    },
  ],
};

// 实例化echarts
const [pieRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .pie {
    width: 100%;
    height: 200px;
  }
}
</style>